<template>
  <div class="gk-layout-container">
    <div class="gk-layout-header">
   	<s-query perms="sys:menu"   @click="findTreeData "  add="true"   @addClick="handleAdd" > 
          <el-form-item>
            <el-input v-model="filters.name" :placeholder="$t('menu.name')"></el-input>
          </el-form-item>
    </s-query>
    </div>
    <!--表格树内容栏-->
    <my-table :data="tableTreeDdata"   rowKey="id"   v-loading="loading"   >
      <table-tree-column prop="label" header-align="center" treeKey="id" :label="$t('menu.name')" /> 
      <el-table-column prop="dType" header-align="center" align="center" :show-overflow-tooltip="true" label="类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.dType&&scope.row.dType!='0'" :size="global.gSize">{{scope.row.dType}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column  label="值">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type==1" :size="global.gSize">{{scope.row.value}}</el-tag>
        </template>
      </el-table-column>
      <column prop="sort" label="排序"/>
      <el-table-column fixed="right" header-align="center" align="center"   :label="$t('action.operation')">
        <template slot-scope="scope">
          <kt-button   :label="$t('action.edit')" perms="sys:menu:edit"
            @click="handleEdit(scope.row)" />
          <kt-delete-button   perms="sys:menu:delete"   @click="handleDelete(scope.row)" />
        </template>
      </el-table-column>
    </my-table>
    <!-- 新增修改界面 -->
    <el-dialog :title="!dataForm.id ? $t('action.add'):$t('action.edit')" width="40%" :visible.sync="dialogVisible"
      :close-on-click-modal="false">
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="submitForm()" label-width="110px"
        :size="global.gSize" style="text-align:left;">
        <el-form-item :label="$t('menu.menuType')" prop="type">
          <el-radio-group v-model="dataForm.type">
            <el-radio v-for="(type, index) in menuTypeList" :label="index" :key="index">{{ type }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="menuTypeList[dataForm.type] + $t('menu.name')" prop="label">
          <el-input v-model="dataForm.label" placeholder="menuTypeList[dataForm.type] + 名称"></el-input>
        </el-form-item>
        <el-form-item label="上级" prop="label">
          <popup-tree-input :data="popupTreeData" :props="popupTreeProps"
            :prop="dataForm.parentName==null||dataForm.parentName==''?this.getKey('common.parentMenu'):dataForm.parentName"
            :nodeKey="''+dataForm.pId" :currentChangeHandle="handleTreeSelectChange">
          </popup-tree-input>
        </el-form-item>
        <el-form-item v-if="dataForm.type == 0" label="分类" prop="dType">
          <el-input v-model="dataForm.dType" placeholder="分类"></el-input>
        </el-form-item>
        <el-form-item v-if="dataForm.type === 1" label="显示值" prop="value">

          <el-input v-model="dataForm.value" placeholder="值"></el-input>

        </el-form-item>
        <el-form-item :label="$t('menu.sort')" prop="orderNum">
          <el-input-number v-model="dataForm.sort" controls-position="right" :min="0" :label="$t('menu.sort')">
          </el-input-number>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :size="global.gSize" @click="dialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button :size="global.gSize" type="primary" @click="submitForm()">{{$t('action.comfirm')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import KtButton from "@/views/Core/KtButton";
  import TableTreeColumn from "@/views/Core/TableTreeColumn";
  import PopupTreeInput from "@/components/PopupTreeInput";
  import FaIconTooltip from "@/components/FaIconTooltip";
  import MyTable from "@/views/Core/MyTable"
  import Column from "@/views/Core/Column"
    import KtDeleteButton from "@/views/Core/KtDeleteButton"
       import SQuery from "@/components/Kj/SQuery" 
  export default {
    components: {
      PopupTreeInput,
      KtButton,
      MyTable,Column,KtDeleteButton,
      TableTreeColumn,
      FaIconTooltip,SQuery
    },
    data() {
      return {
        timer:new Date().getTime() , //声明timer  
        loading: false,
        filters: {
          name: ""
        }, 
        tableTreeDdata: [],
        dialogVisible: false, 
        dataForm: {
          id: 0,
          label: '',
          value: '',
          sort: 0,
          type: 0,
          dType: "",
          pId: 0,
        },
        dataRule: {
          name: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }]
        },
    
        popupTreeData: [],
        popupTreeProps: {
          label: "label",
          children: "children"
        }
      };
    },
    computed: {
       
      menuTypeList() {
        const menuTypeList = ["分类", "数据项"];
        return menuTypeList;
      }
    },
    methods: {
      // 获取数据
      findTreeData: function () {
        this.loading = true; 
        this.$api.dict.getDictTree(this.filters).then(res => {
          this.tableTreeDdata = res.data;
          this.popupTreeData = this.getParentMenuTree(res.data);
          this.loading = false; 
      
        });
      },

   
      
     
      // 获取上级菜单树
      getParentMenuTree: function (tableTreeDdata) {
        let parent = {
          pId: 0,
          name: this.getKey("common.parentMenu"),
          children: tableTreeDdata
        };
        return [parent];
      },
      // 显示新增界面
      handleAdd: function () {
        this.dialogVisible = true;
        this.dataForm = {

          id: 0,
          label: '',
          value: '',
          type: 0,
          sort: 0,
          dType: "",
          pId: 0
        };
      },
      // 显示编辑界面
      handleEdit: function (row) {
        this.dialogVisible = true;
        Object.assign(this.dataForm, row);
      },
      // 删除
      handleDelete(row) {
        
          let params = this.getDeleteIds([], row);
          this.$api.dict.batchDelete(params).then(res => {
            this.$message({ message: this.getKey('action.deleteSuccess'), type: "success" });

            this.findTreeData() 
          });
       
      },
      // 获取删除的包含子菜单的id列表
      getDeleteIds(ids, row) {
        ids.push({ id: row.id });
        if (row.children != null) {
          for (let i = 0, len = row.children.length; i < len; i++) {
            this.getDeleteIds(ids, row.children[i]);
          }
        }
        return ids;
      },
      // 菜单树选中
      handleTreeSelectChange(data, node) {
        this.dataForm.pId = data.id;
        this.dataForm.parentName = data.label;
      },
      // 图标选中
      iconActiveHandle(iconName) {
        this.dataForm.icon = iconName;
      },
      getKey: function (arg) {
        return this.$t(arg)
      },
      // 表单提交
      submitForm() {
        this.$refs["dataForm"].validate(valid => {
          if (valid) {
            this.$confirm(this.getKey('action.isConfirm'), this.getKey('action.tips'), {}).then(() => {
              this.editLoading = true;
              let params = Object.assign({}, this.dataForm);

              this.$api.dict.save(params).then(res => {
                this.editLoading = false;
                if (res.code == 200) {
                  this.$message({ message: this.getKey('action.operateSucess'), type: "success" });
                  this.$refs["dataForm"].resetFields();
                  this.dialogVisible = false;
                } else {
                  this.$message({
                    message: this.getKey('action.operateFail') + res.msg,
                    type: "error"
                  });
                }
                this.findTreeData();
              });
            });
          }
        });
      }
    },
    mounted() {
      this.findTreeData();
    },
    watch: {

      dialogVisible(to, from) {

        if (this.$refs['dataForm'] !== undefined && this.dialogVisible == false) {

          this.$refs["dataForm"].resetFields();
        }
      }
    }
  };
</script>

<style scoped>
</style>